<template>
    <div>
        <el-upload
                class="avatar-uploader"
                :action="uploadAction"
                :show-file-list="false"
                :on-success="handleAvatarScucess"
                :before-upload="beforeAvatarUpload"
        >
            <img v-if="value" :src="longUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div v-if="value" class="avatar-left">
            <a href="javascript:" @click="enlargePic"><i class="el-icon-view avatar-view"></i></a>
        </div>
    </div>
</template>

<script>
    import util from '../../common/util'
    export default {
       props: {
           value:String,
           disabled:{
               type:Boolean,
               default:false
           },
           fileType:String
       },
       data(){
           return {
               uploadAction:global.serverHost+"server/system/upload.aspx",
               dialogVisible:false
           }
        },
        computed: {
            longUrl: function () {
                if(this.value){
                    if(this.value.indexOf(".pdf")>0){
                        return global.serverHost + "images/pdf.jpg"
                    }else   if(this.value.indexOf(".doc")>0){
                        return global.serverHost + "images/word.jpg"
                    }else   if(this.value.indexOf(".xls")>0){
                        return global.serverHost + "images/excel.jpg"
                    }else{
                        return global.serverHost + "images/otherdoc.jpg"
                    }
                }
            }
        },
        methods:{
            enlargePic:function () {
                window.open(global.serverHost+ "upload/" + this.value)
            },
            handleAvatarScucess(res, file) {
                if(res && !res.success){
                    util.msg("上传出错")
                }else{
                    this.$emit('input', res.filename)
                    util.msg("上传完成")
                }
                //this.FLicensePic = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                let allow = true
                if(this.fileType){
                    allow = file.type === this.fileType   //'application/pdf'
                }
                let isLt2M = file.size / 1024 / 1024 < 20
                if (!allow) {
                    this.$message.error('上传文件只能是 pdf 格式!')
                }
                if (!isLt2M) {
                    this.$message.error('上传pdf大小不能超过 20MB!')
                }
                return allow && isLt2M;
            }
        }
    }
</script>


<style scoped>
    .avatar-uploader {
        width: 178px;
        height: 178px;
        border: 1px dashed #c0ccda;
        background-color: #fbfdff;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        float: left
    }

    .avatar-uploader:hover {
        border-color: #20a0ff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
    }

    .avatar-view {
        font-size: 2.5em;
    }

    .avatar-left{
        float: left;
        height: 178px;
        line-height:178px;
    }

</style>